<template>
  <div class="page-popup-wrapper">
    <el-dialog :title="titleD" @close="closeW" width="100%" :visible.sync="popupVisible">
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">


      <mt-checklist
        align="left"
        v-model="selectDatas"
        :options="datalist">
      </mt-checklist>
      </ul>
      <div slot="footer" class="dialog-footer">
        <!--<mt-button @click="engineerpopupVisible = false">取 消</mt-button>-->
        <mt-button type="default" v-on:click="closeThis">确定</mt-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: 'SelectMultiPage',
    props:["datalist","popupVisible",'titleD'],
    data () {
      return {
        disaled:true,
        seen:true,
        selectDatas:[],
        datas:[],
        value1: '',
      }
    },
    methods: {
      closeW(){
        console.log('closeW')
        this.$emit('closeW')
      },
      closeThis () {
        console.log('close')
        this.value1=''

        for (let i = 0; i < this.selectDatas.length; i++) {
          this.value1+=this.selectDatas[i]+';'
        }
        this.$emit('closepage',this.value1)
      },
      getData () {
        console.log('getdata')
      }
    },
    created () {
      // disaled:true
      // this.datalist = ['选项A', '选项B', '选项C']
    }
  }
</script>

<style>
  .fullwidth {
    width: 100%;
  }

  .multi-bottom{
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
    display: block;
    background-color: white;
  }

  @component-namespace page {
    @component popup {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);
        button:not(:last-child) {
          margin-bottom: 20px;
        }
      }

      .mint-popup-1 {
        width: 200px;
        border-radius: 8px;
        padding: 10px;
        transform: translate(-50%, 0);

      h1 {
        font-size: 20px;
        color: #26a2ff;
      }

      p {
        margin-bottom: 10px;
      }
    }

    .mint-popup-1::before {
      triangle: 10px top #fff;
      content: '';
      position: absolute;
      top: -20px;
      right: 50px;
    }

    .mint-popup-2 {
      width: 100%;
      height: 50px;
      text-align: center;
      background-color: rgba(0,0,0,.7);
      backface-visibility: hidden;
    }

    .mint-popup-2 p {
      line-height: 50px;
      color: #fff;
    }

    .mint-popup-3 {
      width: 100%;
      height: 100%;
      background-color: #fff;
    }

    .mint-popup-3 .mint-button {
      position: absolute;
      width: 90%;
      top: 50%;
      left: 5%;
      transform: translateY(-50%);
    }

    .mint-popup-4 {
      width: 100%;
    .picker-slot-wrapper, .picker-item {
      backface-visibility: hidden;
    }
  }
  }
  }
</style>
